<template>
	<view style="warp">
		<!-- 顶部搜索 开始 -->
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead background='#EE515A' inputStyle="disply:flex; justify-content:end; background-color:#FFFFFF;" inputColorStyle="color:#333333"></searchHead>
		<!-- 顶部搜索 结束 -->
		
		<view class=" border-bottom-1B202C flex align-center justify-between" style="padding: 40rpx 40rpx 40rpx 47rpx;background-color: #EE515A;">
			<view>
				<view class="flex align-center margin-bottom-sm">
					<text class="text-white text-df margin-right-xs" style="opacity: 0.7;">总资产(元)</text>
                    <image @click="changeImg()"  v-if="!showUpImg" src="/static/images/icon/look.png" mode="widthFix" style="width: 50rpx;"></image>
                    <image @click="changeImg(parseFloat(user.buyMoney + user.keYongMoney).toFixed(2))"  v-if="showUpImg" src="/static/images/icon/eye2.png" mode="widthFix" style="width: 50rpx;"></image>         
					<!-- <image src="/static/images/icon/look.png" mode="widthFix" style="width: 50rpx;"></image> -->
				</view>
				<text class="text-white text-bold text-xxxl ">
					{{total_money}}
				</text>
			</view>
		</view>
		<!-- 数据展示 开始 -->
		<!-- 数据展示 开始 -->
		<view class="bg_12161F padding-lr-xs padding-tb flex justify-center align-center">
			<view class="border-right-1B202C padding-lr-lg">
				<view class="text-white opacity0_7 text-df">今日收益(元)</view>
				<view class="color_E63535 text-lg text-bold margin-top-sm">
					<p v-if="data.totalProfitAndLoss>=0" style="color: white;font-weight:bold;">{{parseFloat(data.totalProfitAndLoss).toFixed(2)}}</p>
					<p v-if="data.totalProfitAndLoss<0" style="color: #3ca509;font-weight:bold;">{{parseFloat(data.totalProfitAndLoss).toFixed(2)}}</p>
				</view>
			</view>
			<view class="border-right-1B202C padding-lr-lg">
				<view class="text-white opacity0_7 text-df">冻结金额(元)</view>
				<view class="text-white text-lg text-bold margin-top-sm">{{parseFloat(user.djmoney).toFixed(2)}}</view>
			</view>
			<view class="padding-lr-lg">
				<view class="text-white opacity0_7 text-df">可用金额(元)</view>
				<view class="text-white text-lg text-bold margin-top-sm">{{parseFloat(user.money).toFixed(2)}}</view>
			</view>
		</view>
		<!-- 数据展示 结束 -->
		<view class="" style="background-color: #F7F8FA;height: 190rpx;">
			<view class="semicircle">
				
			</view>
			<!-- 外链 开始 -->
			<view class="flex justify-between function margin-top-sm bg_FFFFFF" style="margin: 0 18rpx;flex-direction: row;">
				<view class="text-center color_A8AFC2 item" @click="toTrade">
					<image src="/static/imgs/chicang_slices/mei.png" mode="widthFix" class="" style="width: 60rpx;height: 60rpx;"></image>
					<view class="text-black">买入</view>
				</view>
				<view class="text-center color_A8AFC2 item" @click="tonavigateTo('/pages/trading/sell')">
					<image src="/static/imgs/chicang_slices/mai.png" mode="widthFix" class="" style="width: 60rpx;height: 60rpx;"></image>
					<view class="text-black">卖出</view>
				</view>
				<view class="text-center color_A8AFC2 item" @click="tonavigateTo('/pages/member/recharge')">
					<image src="/static/imgs/chicang_slices/chong.png" mode="widthFix" class="" style="width: 60rpx;height: 60rpx;"></image>
					<view class="text-black">转入</view>
				</view>
				<view class="text-center color_A8AFC2 item" @click="tonavigateTo('/pages/member/cash')">
					<image src="/static/imgs/chicang_slices/ti.png" mode="widthFix" class="" style="width: 60rpx;height: 60rpx;"></image>
					<view class="text-black">转出</view>
				</view>
			</view>
			<!-- 外链 结束 -->
		</view>
		
		
		<!-- 切换 tab 开始 -->
		<scroll-view scroll-x class="bg_FFFFFF nav margin-top-sm" scroll-with-animation style="border-bottom: 1px solid #F2F2F2;">
			<view class="cu-item" :class="item.id==activeTab?'text-blue cur':'text-white'" v-for="(item,index) in tabList" :key="item.id" @tap="tabSelect" :data-id="item.id">{{item.name}}</view>
		</scroll-view>
		
		<view v-if="activeTab == 1">
			<myPosition class="bg_FFFFFF"></myPosition>
		</view>
<!-- 		<view v-if="activeTab == 2">
			<historyPosition  class="bg_12161F"></historyPosition>
		</view>
		<view v-if="activeTab ==3">
			<record class="bg_12161F"></record>
		</view> -->
		<!-- 切换 tab 结束 -->
		
	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	import myPosition from "@/component/position/myPosition.vue"
	import historyPosition from "@/component/position/historyPosition.vue"
	import record from "@/component/position/record.vue"
	export default {
		components: {
			searchHead,
			myPosition,
			historyPosition,
			record,
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				user: {}, // 用户信息
				data: {}, // 股票收益信息 统计信息 主要包含
				showUpImg:true,
				total_money:'*******',
				activeTab: 1,//当前选中的菜单
				tabList:[{
					name:'当下持仓',
					id:1
				},

				// ,{
				// 	name:'卖出记录',
				// 	id:2
				// },{
				// 	name:'申购记录',
				// 	id:3
				// }
				],
			};
		},
		methods: {
            changeImg:function(e){
                this.showUpImg = !this.showUpImg
                if(!this.showUpImg){
                    this.total_money = e; 
                }else{
                    this.total_money = '*******';
                }
             },
			// 跳转页面
			tonavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			toTrade(){
				uni.navigateTo({
					url: '/pages/trading/buy'
				})
			},
			//选中菜单
			tabSelect(e){
				this.activeTab = e.currentTarget.dataset.id
			},
			getUser: function() {
				this.$Request.post(this.$api.index.getUser).then(res => {
					this.user = res.data;
				})
				this.$Request.post(this.$api.index.getOrders).then(res => {
					this.data = res;
				})
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					} else if (res.code == 0) {
						this.$Request.get(this.$api.index.userInfo).then(res => {
							if (res.data.ischeck == 1) {
								uni.showModal({
									content: "实名认证，机构正在审核中",
									confirmText: "确定",
									cancelText: "取消"
								})
							} 
							else if (res.data.ischeck == 0) {
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "温馨提示：根据反洗钱规定，您需要完成实名认证才可以继续操作。",
									confirmText: "去认证",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/member/realname?flag=" + ischeck,
											})
										} else if (res.cancel) {

										}
									}
								})
							} 
							else if (res.data.ischeck == 3) {
								var ischeck = res.data.ischeck;
								uni.showModal({
									content: "实名认证未通过审核，请重新提交",
									confirmText: "确定",
									cancelText: "取消",
									success: (res) => {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/member/realname?flag=" + ischeck,
											})
										} else if (res.cancel) {

										}
									}
								})
							}
						})
					}
				})
			}
		},
		onShow() {
			this.checkLogin()
			this.getUser()
			let _self = this
			this.timer = setInterval(function() {
				_self.getUser();
			}, 10000)
		},
	}
</script>
<style lang="scss" scoped>
	@import "./position.scss";
	page{
		background-color: #FFFFFF;
	}
	.semicircle{
		z-index: -1;
		margin-top: -15rpx;
		width: 100vw;
		height: 48rpx;
		background-color: #EE515A;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
	}
	.text-blue{
		color: #E23232;
	}
	
	.function{
		z-index: 2;
		margin-top: -40rpx !important;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.border-bottom-1B202C{
		border-bottom: 1px solid #EE515A;
	}
	.bg_12161F{
		background-color: #EE515A !important;
	}
	.border-right-1B202C{
		border-right:1px solid #8A8E94;
	}
		.item {
			padding: 30rpx 35rpx;
	
			image {
				width: 50rpx;
			}
		}
	
		/deep/ .mescroll-bottombar {
			height: 0px !important;
		}
	
		.td {
			flex: 0 1 25%;
		}
	
		.td:nth-child(2) {
			flex: 0 1 15%;
		}
	
		.td:nth-child(3) {
			flex: 0 1 30%;
		}
	
		.td:nth-child(4) {
			flex: 0 1 30%;
		}
</style>
